<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="25%"
    :before-close="cancel"
  >
    <el-form v-loading="loading" :model="form" ref="formRef" label-width="auto">
      <el-form-item label="支付方式" prop="name" :rules="getRules('input','支付方式')">
        <el-input style="width: 85%;" v-model="form.name" :maxlength="10" show-word-limit placeholder="请输入" />
      </el-form-item>
      <el-form-item label="图标" prop="icon" :rules="iconRules">
        <UploadImg :max-img-length="1" :imageUrlInfo="form.icon"  @backValue="backValueImg">
        </UploadImg>
        <div class="tips">支持jpg、jpeg、png格式，图片比例1:1，建议300*300</div>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input style="width: 85%;" resize="none" :rows="5" v-model="form.remark" :maxlength="100" type="textarea" show-word-limit placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="loading" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="confirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { paymentSetupEdit } from '@/api/BusinessScope/paymentSetup'
import { useTableRefresh } from '@/hooks';
import { usePaymentSetup } from '../Hooks/index'
import UploadImg from '@/components/UploadImg/index.vue'
import getRules from '@/validUtils';

const { dialogVisible, dialogDetail,seachTableRef } = usePaymentSetup()
const isEdit = computed(() => dialogDetail.value.id ? true : false)
const title = computed(() => `${isEdit.value? '编辑' : '新增'}支付方式`)

const loading = ref(false)
const formRef = ref(null)
const form = ref({
  name:'',
  icon:'',
  remark:''
})
const iconRules = [
  {
    required: true,
    validator: (rule, value, callback) => {
      if (!form.value.icon) {
        callback(new Error("请上传支付方式图标"));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }
]
watch(dialogVisible, (val) => {
  if (val) {
    if(dialogDetail.value.id){
      form.value.name = dialogDetail.value.configValue
      form.value.icon = dialogDetail.value.configImg
      form.value.remark = dialogDetail.value.configDesc
    }else{
      resetForm()
    }
  }
})

const backValueImg = (value) => {
  form.value.icon = value
  formRef.value.validateField('icon')
}
const resetForm = ()=>{
  formRef.value && formRef.value.resetFields()
  form.value.name = ''
  form.value.icon = ''
  form.value.remark = ''
}
const cancel = () => {
  dialogVisible.value = false
}
const confirm = ()=>{
  formRef.value.validate(async (valid)=>{
    if(valid){
      try{
        loading.value = true;
        const params = {
          payType:form.value.name,
          configImg:form.value.icon,
          configRemark:form.value.remark
        }
        if(isEdit.value){
          params.id = dialogDetail.value.id
        }
        await paymentSetupEdit(params)
        ElMessage.success(`${isEdit.value?'修改':'新增'}成功}`)
        useTableRefresh(seachTableRef,isEdit.value)
        cancel()
        resetForm()
      }finally{
        loading.value = false;
      }
    }
  })
}
</script>

<style lang="less" scoped>
.tips{
  color: #666666;
  font-size: 12px;
  font-weight: 400;
}
</style>